// 引入依赖
import Vue from 'vue'
// 引入原始的路由
import Router from 'vue-router'

// 引入组件
// import HelloWorld from '@/components/HelloWorld'
// import father from '@/components/father'
// import big from '@/components/big'
// import notFound from '@/components/notFound'
// import day04 from '../components/day04com1.vue'

// 懒加载:当路由被访问的时候才加载对应组件
const HelloWorld = () => import('../components/HelloWorld')
const father = () => import('../components/father')
const big = () => import('../components/big')
const notFound = () => import('../components/notFound')
const day04 = () => import('../components/day04com1')
const list = () => import('../components/goodsList.vue')
const detail = () => import('../components/detail.vue')
const pageA = () => import('../components/pageA.vue')
const pageB = () => import('../components/pageB.vue')
const child1 = () => import('../components/child1.vue')
const child2 = () => import('../components/child2.vue')
const child3 = () => import('../components/child3.vue')
const axios = () => import('../components/axios.vue')
const vuex = () => import('../components/vuex.vue')

// 将Router作为中间件使用
Vue.use(Router)

const router = new Router({
  // hash:哈希模式vue默认的路由模式
  mode: 'history',
  base: '/vue',
  // 路由表：路由和组件的对应关系
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // 元信息
      meta: {title: '首页'}
    },
    {
      path: '/father',
      alias: '/dad',
      name: 'father',
      component: father,
      meta: {title: '父组件'}
    },
    {
      path: '/big',
      name: 'big',
      component: big,
      meta: {title: '嵌套'}
    },
    {
      path: '/axios',
      name: 'axios',
      component: axios,
      meta: {title: 'axios示例'}
    },
    {
      path: '/vuex',
      name: 'vuex',
      component: vuex,
      meta: {title: 'vuex示例'}
    },
    {
      path: '/day04',
      name: 'd',
      component: day04,
      meta: {title: '404'}
    },
    {
      path: '/pageA',
      component: pageA,
      meta: {title: 'A页面'}
    },
    {
      // B页面是嵌套路由
      path: '/pageB',
      component: pageB,
      meta: {title: 'B页面'},
      children: [
        // 这里是子路由
        // 如果子路由开头写了斜线，就需要写完整的路由
        // 默认的子路由，将子路由的path改为空
        {path: '/pageB/child1', component: child1},
        {path: 'child2', component: child2},
        {path: 'child3', component: child3},
      ]
    },
    {
      path: '/list',
      component: list,
      meta: {title: '商品列表'},
      // 要守卫哪个路由，就在哪个路由对象中添加
      beforeEnter: (to, from, next) => {
        console.log(to, from);
        next();
      }
    },
    {
      // 动态路由
      path: '/detail/:name',
      component: detail,
      meta: {title: '商品详情'}
    },
    // {
      // 处理404页面的第一种方式
      // 通配符，可以匹配任意长度的任意字符
      // path: '*',
      // component: notFound
    // }
    {
      // 处理404页面的第二种方式
      path: '*',
      redirect: '/notFound'
    },
    {
      path: '/notFound',
      component: notFound
    }
  ]
})

// 解决$router.push导航到当前路径时的报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

// 即是全局的优势前置的
router.beforeEach((to, from, next)=> {
  // if(to!= 'login') {
    // 判断是否登录
    // if login  next()
    // else next('/login')
  // }
  // to要去的新的路由对象，from正在离开的老的路由对象
  document.title = to.meta.title;
  // 将执行权交给下一个中间件
  next()
})

export default router